Presentación

Column

Bienvenida a esta plataforma de acceso público

MRSE-H de la EPS Ilo S.A.

EPS Ilo S.A. realiza implementación del Plan de Intervención los MRSE en la Comunidad Campesina de Asana con la finalidad de conservación y recuperación de los Servicios Ecosistémicos Hídricos.

Equipo MRSE

Column

NOSOTROS

Imagen 1 Imagen 2 Imagen 3

Precipitación

Column

DATOS CRUDOS (DESCARGA)

MESES COLECTADOS

Column

GRÁFICO DE BARRAS

Column

Precipitación acumulada

228.4 milímetros

Inicio de registro

2023-02-02 10:30:00

Último registro

2023-09-19 11:45:00

MAPA WEB (Clic aquí para ser dirigido a un mapa más detallado)

Noticias

EL INICIO DE LA IMPLEMENTACIÓN

SUPERVISIÓN DE ZANJAS DE INFILTRACIÓN

VERIFICACIÓN DE INSTALACIÓN DE PLUVIÓMETRO

PARTICIPACIÓN EN PLATAFORMA DE BUENA GOBERNANZA

APROBACIÓN DEL ACUERDO MERESE ANTE EL MINAM

---
title: "MRSE"
output: 
  flexdashboard::flex_dashboard:
    theme: 
      version: 4
      bootswatch: cerulean
    logo: logo.png
    favicon: imagen1.png
    storyboard: true
    social: menu
    vertical_layout: fill
    source: embed
    orientation: columns
editor_options: 
  chunk_output_type: console
---

```{r setup, include=FALSE}
library(flexdashboard)
library(highcharter)
library(tidyverse)
library(plotly)
library(ggthemes)
library(lubridate)
library(vembedr)
library(leaflet)
library(sf)
```

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-8B5C6WFB9Q">
  </script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-8B5C6WFB9Q');
  </script>
</head>
Presentación {data-icon="fa-droplet"}
===

Column {data-width=200}
---
<center>
<!-- ![](https://cdn.www.gob.pe/uploads/campaign/photo/000/001/008/Logo-EALV-sin-fondo.png){width="200"} -->
![](mrse_logo.png){width="85%"}

</center>

### <span style="color:darkblue;font-weight:bold;">Bienvenida a esta plataforma de acceso público</span>

***MRSE-H de la EPS Ilo S.A.***

> EPS Ilo S.A. realiza implementación del Plan de Intervención los MRSE en la Comunidad Campesina de Asana con la finalidad de conservación y recuperación de los Servicios Ecosistémicos Hídricos.

***Equipo MRSE***
<br><br>
<center>

```{r}
embed_youtube("FqETSuNF4ks", height = 215, width = NULL,allowfullscreen = TRUE)
```
</center>

Column {.tabset data-width="500" .tabset-fade}
---

### <span style="color:darkblue;font-weight:bold;">NOSOTROS</span>

<div class="contenedor-imagen">
  <img src="fondo2.jpg" alt="Imagen 1">
  <img src="fondo3.jpg" alt="Imagen 2">
  <img src="fondo4.jpg" alt="Imagen 3">
</div>

<!-- Agrega botones para avanzar y retroceder -->
<button id="anterior">Anterior</button>
<button id="siguiente">Siguiente</button>

```{css}
        /* Estilos para el contenedor de la transición */
        .contenedor-imagen {
            width: 100%;
            height: 620px;
            position: relative;
            overflow: hidden;
        }

        /* Estilos para las imágenes */
        .contenedor-imagen img {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        /* Estilo para mostrar la primera imagen */
        .contenedor-imagen img:first-child {
            opacity: 1;
        }

        /* Estilo para las imágenes anteriores */
        .image-previous {
            opacity: 0.5;
            left: -100%;
        }

        /* Estilos para los botones */
        button {
    margin: 0;
    padding: 10px 20px; /* Aumentamos el padding para un aspecto más moderno */
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo con transparencia */
    color: #fff; /* Color de texto blanco */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, color 0.3s; /* Efecto de transición */
    outline: none; /* Quitamos el borde al hacer clic */
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Cambio de color al pasar el mouse */
}

        #anterior {
            left: 10px; /* Ajusta la posición horizontal del botón "Anterior" */
        }

        #siguiente {
            right: 10px; /* Ajusta la posición horizontal del botón "Siguiente" */
        }
```


```{js}
var currentImage = 0;
var images = document.querySelectorAll('.contenedor-imagen img');
var anteriorButton = document.getElementById('anterior');
var siguienteButton = document.getElementById('siguiente');

// Función para avanzar a la siguiente imagen
function avanzar() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage + 1) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Función para retroceder a la imagen anterior
function retroceder() {
  images[currentImage].classList.add('image-previous');
  images[currentImage].style.opacity = 0;
  currentImage = (currentImage - 1 + images.length) % images.length;
  images[currentImage].style.opacity = 1;
  images[currentImage].classList.remove('image-previous');
}

// Manejadores de clic para los botones
anteriorButton.addEventListener('click', retroceder);
siguienteButton.addEventListener('click', avanzar);

// Cambia la imagen automáticamente cada 6 segundos
setInterval(avanzar, 6000);
```


Precipitación {data-icon="fa-chart-simple"}
===

## Column {data-width="600"}



```{r}
# Carga de la base de datos:
df <- read.csv("data_marzo")

df$date <- as.POSIXct(
  paste(df$date, df$hora, sep = " "),
  format = "%Y-%m-%d %H:%M")

df$hora <- NULL

# Últimos datos descargados:
descargado <- read.csv("n4.csv", skip = 1)[-1]
names(descargado) <- c("date", "pp")
descargado$date <- as.POSIXct(
  descargado$date, format = "%y/%m/%d %H:%M")

# Unión de datasets
df2 <- rbind(df, descargado)
```

<!-- Conversión a data diaria: -->

```{r}
df3 <- df2 %>% 
  mutate(date0 = as.Date(date, format = "%Y-%m-%d"),
         date1 = format(date, format = "%Y-%m"),
         date2 = format(date, format = "%d")) %>% 
  reframe(pp = sum(pp, na.rm = T), .by = c(date1,date2))
```

### <span style="color:darkblue;font-weight:bold;">DATOS CRUDOS (DESCARGA)</span>

```{r}
data <- df2
names(data) <- c("fecha", "Precipitacion")
data$fecha <- as.numeric(data$fecha)*1000-(5*3600*1000)

highchart(type = "stock") %>%
  hc_title(text = "Estación Asana (Datos crudos)") %>%
  hc_xAxis(type = "datetime") %>%
  hc_add_series(data = data, type = "column",
                hcaes(x = fecha, y = Precipitacion),
                name = "Precipitacion", color = "#3182BD") %>%
  hc_exporting(
    enabled = TRUE,
    buttons = list(
      contextButton = list(
        menuItems = c("downloadPNG",
                      "downloadPDF",
                      "separator",
                      "downloadCSV",
                      "downloadXLS",
                      "separator",
                      "resetZoom")
      )
    )
  ) %>% 
  hc_xAxis(type = "datetime", showLastLabel = TRUE,
           dateTimeLabelFormats = list(month = "%B")) %>% 
  hc_tooltip(shared = TRUE, useHTML = TRUE) %>% 
  hc_chart(zoomType = "x")
```

### <span style="color:darkblue;font-weight:bold;">MESES COLECTADOS</span>

```{r}
cantidad <- sum(length(unique(df3$date1)))
gauge(paste0(cantidad, "meses"), min = 0, max = 12, gaugeSectors(
  danger = c(0, 2), warning = c(3, 5), success = c(6, 10)
))
```

## Column {data-width="600"}

### <span style="color:darkblue;font-weight:bold;">GRÁFICO DE BARRAS</span>

```{r}
df4 <- df3
names(df4) <- c("fecha1","fecha3", "Precipitacion")
m2 <- df4 %>% ggplot(aes(x=factor(fecha3),y=Precipitacion))+
  geom_bar(stat="identity",fill="turquoise", position = )+
  labs(x="Fecha",y="Precipitación (mm)") + 
  theme_minimal() + theme(plot.title = element_text(size = 14,
    face = "bold", hjust = 0.5),
    plot.subtitle = element_text(size = 12,
    face = "italic", hjust = 0.5),
    legend.position = "none",
    strip.text.x = element_text(colour = "white",face = "bold",
                                family = "helvetica"),
    strip.background = element_rect(
     color="#3182BD", fill="#3182BD",
     size=1.5, linetype="solid"),
    axis.title = element_text(size = 5),
    axis.text.x = element_text(size = 5,
        angle = 90)) +
  facet_wrap(~fecha1,ncol=2)
ggplotly(p=m2)
```

## Column {data-width="200"}

### Precipitación acumulada
```{r}
valueBox(paste0(sum(df2$pp, na.rm=T)," milímetros"), icon = "fa-droplet")
```

### Inicio de registro

```{r}
valueBox(min(df2$date, na.rm=T), icon = "fa-pencil")
```

### Último registro

```{r}
valueBox(max(df2$date, na.rm=T), icon = "fa-pencil")
```

### <a href="https://felt.com/map/MRSE-H-YL2D8IAiQoucf0SETYCFBC?loc=-17.04095,-70.48828,12.2z" style="color: darkblue; font-weight: bold; text-decoration: none;">MAPA WEB (Clic aquí para ser dirigido a un mapa más detallado)</a>


```{r}
library(leaflet)
leaflet() %>% 
  addTiles() %>%
  addMarkers(lat=-17.062286,lng=-70.520806,
             popup = paste(sep="<br>","<b>Lugar:</b>","Estación pluviométrica","<b>Latitud:</b>","-17.062286","<b>Longitud:</b>"
                           ,"-70.520806")) %>% 
  addCircleMarkers(lat=c(-17.062286,-17.630402),
                   lng=c(-70.520806,-71.335089), radius = 40,
                   color="deepskyblue") %>% 
  addMarkers(lat=-17.630402,lng=-71.335089,
             popup = paste(sep="<br>","<b>Lugar:</b>","EPS ILO S.A.","<b>Latitud:</b>","-17.630402","<b>Longitud:</b>",
                           "-71.19908"))
```

Noticias {.storyboard data-icon="fa-newspaper"}
===
  
### EL INICIO DE LA IMPLEMENTACIÓN

![](TIME_LINE/F1.png)

### SUPERVISIÓN DE ZANJAS DE INFILTRACIÓN

![](TIME_LINE/F1.1.png)

### VERIFICACIÓN DE INSTALACIÓN DE PLUVIÓMETRO

![](TIME_LINE/F2.png)

### PARTICIPACIÓN EN PLATAFORMA DE BUENA GOBERNANZA

![](TIME_LINE/F3.png)

### APROBACIÓN DEL ACUERDO MERESE ANTE EL MINAM

![](TIME_LINE/F4.png)